{extend  name="manage@public/layout" /}
{block name="content"}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                       
                        <h5 style="margin:-5px 5px 0px !important;">
                            <button onClick="modaldemoBank()" style="padding:4px;margin-bottom:0 !important" type="button" class="btn btn-primary btn-xs">添加银行卡</button>
                        </h5>
                       
                        <div class="ibox-tools">
                            <a class="collapse-link" onclick="location.replace(location.href);">
                                <i class="fa fa-refresh"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive">
                           
                            <table class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>银行卡号</th>
                                        <th>开户人</th>
                                        <th>所属银行</th>
                                        <th>所在支行</th>
                                        <th>开卡城市</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {volist name="list" id="vo"}
                                    <tr>
                                        <td>{$vo.id}</td>
                                      
                                        <td>{$vo.card_number}</td>
                                        <td>{$vo.account_name}</td>
                                        <td>{$vo.bank_name}</td>
                                        <td>{$vo.branch}</td>
                                        <td>{$vo.location}</td>
                                        <td>{$vo.create_time}</td>
                                        <td>
                                            <button onclick="modaldemoBank({$vo.id})" title="编辑" type="button" class="btn btn-sm btn-white"><i class="fa fa-edit">&nbsp;编辑</i></button>
                                          
                                            <button title="删除银行卡" type="button" data-id="{$vo.id}" class="btn btn-sm bt-bank-del btn-white"><i class="fa fa-trash-o">&nbsp;删除</i></button>
                                        </td>
                                    </tr>
                                    {/volist}
                                </tbody>
                            </table>
                            <div style="float:right;" class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                {$page|raw}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
     <!-- 弹框 --->
     <div id="modal-demo-bank" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">添加银行卡</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
                </div>
                <input type="hidden" name="p_id" value="0" />
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">银行卡号</label>
                        <div class="col-sm-7">
                            <input type="text" oninput="value=value.replace(/[^\d]/g,'')" placeholder="例如：622211121561316132" name="card_number" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">开户名</label>
                        <div class="col-sm-7">
                            <input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" placeholder="例如：张三" name="account_name" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属银行</label>
                        <div class="col-sm-7">
                            <input type="text" placeholder="例如：中国银行" name="bank_name" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所在支行</label>
                        <div class="col-sm-7">
                            <input type="text" placeholder="例如：龙岗支行" name="branch" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">开卡地区</label>        
                        <div id="distpicker">
                            <select style="margin-left:15px;width:120px;float:left;" class="form-control" id="province"></select>
                            <select style="margin-left:10px;width:120px;float:left;" class="form-control" id="city"></select>
                            <select style="margin-left:10px;width:120px;float:left;" class="form-control" id="district"></select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary btn-bank ">确定</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!--  end --->
    {/block}
    {block name="script"}

<script src="/static/js/distpicker/distpicker.data.js"></script>
<script src="/static/js/distpicker/distpicker.js"></script>
<script>
function modaldemoBank(id) {
    if(id != null){
        $.post('/web/save_bank',{id:id,type:1},function(result){
            if(result.code == 1){
                $("input[name='p_id']").val(result.data.id);
                $("input[name='card_number']").val(result.data.card_number);
                $("input[name='account_name']").val(result.data.account_name);
                $("input[name='bank_name']").val(result.data.bank_name);
                $("input[name='branch']").val(result.data.branch);
                //初始化插件数据
                $('#distpicker').distpicker('destroy');
                //重新赋值
                $('#distpicker').distpicker({
                    province: result.data.province,
                    city: result.data.city,
                    district: result.data.district
                });
            }else{
                parent.layer.msg(result.msg);
                return false;
            }
        })
    }else{
        $("input[name='p_id']").val('');
        $("input[name='card_number']").val('');
        $("input[name='account_name']").val('');
        $("input[name='bank_name']").val('');
        $("input[name='branch']").val('');
        $('#distpicker').distpicker('destroy');
        $('#distpicker').distpicker();
    }
    $("#modal-demo-bank").modal("show");
}
//添加银行卡
$(".btn-bank").click(function(){
    
    var p_id = $("input[name='p_id']").val();
    var card_number = $("input[name='card_number']").val();
    var account_name = $("input[name='account_name']").val();
    var bank_name = $("input[name='bank_name']").val();
    var branch = $("input[name='branch']").val();
    var province = $("#province option:selected").val();
    var city = $("#city option:selected").val();
    var district = $("#district option:selected").val();
    if(card_number == ''){
        parent.layer.msg("银行卡号不能为空");
        return false;
    }
    if(account_name == ''){
        parent.layer.msg("银开户名不能为空");
        return false;
    }
    if(bank_name == ''){
        parent.layer.msg("所属银行不能为空");
        return false;
    }
    if(branch == ''){
        parent.layer.msg("所在支行不能为空");
        return false;
    }
    if(province == '' || city == '' || district == ''){
        parent.layer.msg("开卡地区不能为空");
        return false;
    }
    var data = {};
   
    data['p_id'] = p_id;
    data['card_number'] = card_number;
    data['account_name'] = account_name;
    data['bank_name'] = bank_name;
    data['branch'] = branch;
    data['location'] = province+' - '+city+' - '+district;
    $(".btn-bank").attr({ disabled: "disabled" });
    index = parent.layer.load(0, {shade: false});
    $.post('/web/save_bank',data,function(result){
        parent.layer.msg(result['msg']);
        parent.layer.close(index);//去掉加载动画
        if(result['code'] == 1){
            $("#modal-demo").modal("hide");
            setTimeout(function() {
                window.location.reload();
            }, 1000)
        }else{
            $(".btn-bank").removeAttr("disabled");
        }
    });
})
//删除银行卡
$(".bt-bank-del").click(function(){
    var id = $(this).attr('data-id');
    parent.layer.confirm('确认删除该银行卡吗？', {
        btn: ['确定','取消'], //按钮
        shade: false //不显示遮罩
    }, function(){
        $.post('/web/del_bank',{bank_id:id},function(result){
            parent.layer.msg(result['msg']);
            if(result.code == 1){
                setTimeout(function() {
                    window.location.reload();
                }, 1000)
            }
        });
    }, function(){
        parent.layer.msg('操作取消');
    });
})

</script>
 {/block}

